import { formatStyle } from '@/utils';
import React, { DragEventHandler, memo, useEffect, useMemo, useRef, useState } from 'react';
import { connect } from 'react-redux';
import empty from '../../asstes/empty.png';
import './index.less';
let defaultStl: React.CSSProperties;
function index(props: API.IResizeDiv) {
  const { project, style, id, children } = props;
  const [position, setPosition] = useState({ x: 0, y: 0 });
  let boxStyle = { width: style?.width || 'auto', height: style?.height || 'auto' };

  let timer: any;
  const ref: { current: any } = useRef<HTMLDivElement>();
  function ondragstart(e: any) {
    var img = new Image();
    img.src = empty;
    e.dataTransfer.setDragImage(img, 0, 0);
    // 修改 defaultStl
    defaultStl = formatStyle(boxStyle);
    setPosition({
      x: e.pageX,
      y: e.pageY,
    });
  }

  function ondragcapture(e: any) {
    const { dragSizeChange } = props;
    if (timer) return;
    timer = setTimeout(() => {
      timer = null;
      let clas = e.target.className.split('-')[1];
      if (e.pageX === 0 && e.pageY === 0) return;

      const translageSize = {
        x: ['t', 'b'].includes(clas) ? 0 : e.pageX - position.x,
        y: ['l', 'r'].includes(clas) ? 0 : e.pageY - position.y,
      };
      if (clas.includes('l')) {
        translageSize.x = -translageSize.x;
      }
      if (clas.includes('t')) {
        translageSize.y = -translageSize.y;
      }

      const { width, height }: any = defaultStl;

      // 重新设置宽高
      boxStyle = {
        width: (width || 0) + translageSize.x,
        height: (height || 0) + translageSize.y,
      };

      dragSizeChange && dragSizeChange(boxStyle, props.id);
    }, 100);
  }

  function ondragend(e: React.DragEvent<HTMLSpanElement>) {
    const { dragSizeChange } = props;
    ondragcapture(e);
    dragSizeChange && dragSizeChange(boxStyle, props.id)
  }

  function setSelectedNode(e) {
    e.stopPropagation();
    props.setSelectedNode(id);
  }

  useEffect(() => {
    const child = ref.current.firstElementChild;
    const actuleStyle = {
      width: style.width || child.offsetWidth,
      height: style.height || child.offsetHeight
    }
    boxStyle = actuleStyle;
    child.style.width = '100%';
    child.style.height = '100%';
  }, [style]);


  return (
    <div
      className={`resizeable-box ${project.currentCompId === id ? 'selected' : ''}`}
      style={{ ...style, ...boxStyle }}
      ref={ref}
      onClick={setSelectedNode}
    >
      {children}
      <span
        className="handle-box"
        onDragStart={ondragstart}
        onDragEnd={ondragend}
        onDragCapture={ondragcapture}
      >
        <i className="handle-tl" draggable></i>
        <i className="handle-t" draggable></i>
        <i className="handle-tr" draggable></i>
        <i className="handle-l" draggable></i>
        <i className="handle-r" draggable></i>
        <i className="handle-bl" draggable></i>
        <i className="handle-b" draggable></i>
        <i className="handle-br" draggable></i>
      </span>
    </div>
  );
}

export default connect(
  ({ project }: any) => ({ project }),
  {
    setSelectedNode: (payload: string) => ({ type: 'project/setSelectedNode', payload }),
  }
)(memo(index));
